<template>
  <div class=" calassbox">
    <!-- 渲染内容图片 -->
    <div class="imgletft">
      <a href="">
        <div class="milk">
          <img
            src="https://yanxuan-item.nosdn.127.net/df6469193883498c4c1014d113a927f9.png?type=webp&quality=95&thumbnail=320x320&imageView"
            alt="">
        </div>
        <div class="prdtTags2"></div>
        <div class="bd2">
          <div class="bd3">
            <h4>营养升级 新西兰4.0g纯牛奶250ml l*24盒</h4>
          </div>
          <div class="bd4">
            <span>￥96</span>
            <span class="span1">￥109</span>
          </div>
        </div>
      </a>
    </div>
    <div class="calass">
      <li class="imgbox" v-for="(_rawValue, id) in tableData" :key="id">
        <div>
          <img :src="_rawValue.img" alt="">
        </div>
        <div class="prdtTags"></div>
        <div class="bd">
          <h4 class="name"><a href="#">{{ _rawValue.name }}</a></h4>
        </div>
        <div class="Pricebox"><span>{{ _rawValue.Discount }}</span>
          <span class="Price2">{{ _rawValue.Price }}</span>
        </div>
      </li>
    </div>
  </div>
</template>

<script setup>
import axios from 'axios'
import { onMounted, ref } from 'vue';


// setup() {
const tableData = ref([])


function loadList() {
  axios.get('http://localhost:3001/userss').then(res => {
    tableData.value = res.data
  })


}

onMounted(() => {
  loadList()

})

// async function loadList() {
//   const { res } = await axios.get('http://localhost:3001/users')
//   console.log(res);
//   console.log(12121);
// }

</script>

<style  lang="less" scoped>
.calassbox {
  display: flex;
}

.imgletft {
  width: 390px;
  height: 570px;
  background: #fff;
  margin-right: 10px;

  .milk {


    margin: 40px 35px;

    img {
      width: 320px;
      height: 320px;
    }
  }

  .bd2 {
    width: 390px;
    height: 122px;

    .bd3 {
      width: 248px;
      height: 50px;
      text-align: center;
      margin: 0 auto 13px;
    }

    .bd4 {
      font-size: 13px;
      line-height: 13px;
      color: #d4282d;
      padding: 1px 0 9px;
      margin: 0;
      text-align: center;
    }

    .span1 {
      text-decoration: line-through;
      margin-left: 10px;
      color: #999999;
      font-size: 14px;
    }

  }

  .prdtTags2 {
    border-top: 1px solid #F4F0EA;

    height: 20px;
    width: 390px;

    // overflow: hidden;
  }
}

.calass {
  width: 700px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;

}

.imgbox:nth-child(n+4) {
  margin-top: 10px;
}



.imgbox {
  width: 223px;
  height: 280px;
  min-height: 1px;
  text-align: center;
  background-color: #fff;
  list-style: none;

  img {
    width: 180px;
    height: 180px;
    margin-top: 10px;

  }

  .prdtTags {
    height: 10px;
    font-size: 0;
    color: #fff;
    width: 220px;
    margin: -1px auto 11px;
    overflow: hidden;
    border-bottom: 1px solid #F4F0EA;
  }

  .bd {
    width: 223px;
    width: 93px;

    .name {
      width: 166px;
      margin-left: 25px;
      max-height: 40px;
      line-height: 20px;
      text-align: center;
    }

  }

  .Pricebox {
    width: 100%;
    margin-top: 5px;
    text-align: center;

    .Price2 {
      margin-left: 10px;
      color: #999999;
      text-decoration: line-through
    }
  }
}
</style>